<template>
  <div class="administratorManagement">
    <h3>管理员管理</h3>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入管理员id" v-model="search1">
          <template slot="prepend">管理员id</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入用户名" v-model="search2">
          <template slot="prepend">管理员用户名</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入昵称" v-model="search3">
          <template slot="prepend">管理员昵称</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>是否被锁定</label>
        <el-select v-model="search4" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入角色id" v-model="search5">
          <template slot="prepend">角色id</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入邮箱" v-model="search6">
          <template slot="prepend">邮箱</template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData" v-if="permissions_obj.id_36||permissions_obj.id_all">添加</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" header-align="center" align="center"  label="序号"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="manager_id"
          label="管理员id"
          width="200"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="username"
          label="用户名"
          width="120"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="nick" label="昵称" width="120"></el-table-column>
        <el-table-column header-align="center" align="center" prop="locked_at" label="锁定日期" width="95"></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="role_id"
          label="角色id"
          width="80"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="role_name"
          label="角色名称"
          width="100"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="email" label="邮箱" ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="创建时间"
          width="100"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="login_at" label="最后登陆时间" width="100"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDetail(scope.$index, scope.row)" v-if="permissions_obj.id_35||permissions_obj.id_all">详情</el-button>
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)" v-if="permissions_obj.id_37||permissions_obj.id_all">编辑</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)" v-if="permissions_obj.id_38||permissions_obj.id_all">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10,30,50,100]"
        :page-size="pageSize"
        layout="total, prev, pager, next,sizes,jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
    <!-- //管理员详情弹窗 -->
    <el-dialog title="管理员详情" :visible.sync="centerDialogVisible" width="40%" center>
      <div class="detail">
        <div class="title">基本信息</div>
        <div class="detailBox">
          <div class="detailItem">
            <font>管理员id：</font>
            <span>{{managerDetail.manager_id}}</span>
          </div>
          <div class="detailItem">
            <font>用户名：</font>
            <span>{{managerDetail.username}}</span>
          </div>
          <div class="detailItem">
            <font>昵称：</font>
            <span>{{managerDetail.nick}}</span>
          </div>
          <div class="detailItem">
            <font>锁定日期：</font>
            <span>{{managerDetail.locked_at}}</span>
          </div>
          <div class="detailItem">
            <font>角色id：</font>
            <span>{{managerDetail.role_id}}</span>
          </div>
          <div class="detailItem">
            <font>角色名称：</font>
            <span>{{managerDetail.role_name}}</span>
          </div>
          <div class="detailItem">
            <font>邮箱：</font>
            <span>{{managerDetail.email}}</span>
          </div>
          <div class="detailItem">
            <font>创建时间：</font>
            <span>{{managerDetail.created_at}}</span>
          </div>
          <div class="detailItem">
            <font>更新时间：</font>
            <span>{{managerDetail.updated_at}}</span>
          </div>
          <div class="detailItem">
            <font>最后登陆时间：</font>
            <span>{{managerDetail.login_at}}</span>
          </div>
        </div>
      </div>
      <div class="history" v-if="managerDetail.role">
        <div class="title">角色信息</div>
        <div class="detailBox">
          <div class="detailItem">
            <font>角色id：</font>
            <span>{{managerDetail.role.id}}</span>
          </div>
          <div class="detailItem">
            <font>角色名称：</font>
            <span>{{managerDetail.role.name}}</span>
          </div>
          <div class="detailItem">
            <font>角色权限清单：</font>
            <span v-for="(item,index) in managerDetail.role.permissions" :key="index">{{item}},</span>
          </div>
          <div class="detailItem">
            <font>排序：</font>
            <span>{{managerDetail.role.squad}}</span>
          </div>
          <div class="detailItem">
            <font>创建时间：</font>
            <span>{{managerDetail.role.created_at}}</span>
          </div>
          <div class="detailItem">
            <font>更新时间：</font>
            <span>{{managerDetail.role.updated_at}}</span>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- //修改管理员信息弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="modifyEditorDialogVisible" width="40%" center>
      <div class="row" v-if="isShowId">
        <span>管理员id：</span>
        <el-input v-model="inputAdministratorId" placeholder clearable :disabled="true"></el-input>
      </div>
      <div class="row" v-if="isShowUserName">
        <span>用户名：</span>
        <el-input v-model="inputUserName" placeholder="请输入用户名" clearable></el-input>
      </div>
      <div class="row">
        <span>昵称：</span>
        <el-input v-model="inputNickName" placeholder="请输入昵称" clearable></el-input>
      </div>
      <div class="row">
        <span>角色id：</span>
        <el-select v-model="inputRolesId" placeholder="请选择" >
          <el-option
            v-for="item in rolesIdOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>邮箱：</span>
        <el-input v-model="inputEmail" placeholder="请输入邮箱" clearable></el-input>
      </div>
      <div class="row">
        <span>密码：</span>
        <el-input v-model="inputPassword" placeholder="请输入密码" clearable show-password></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "administratorManagement",
  data() {
    return {
      options: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "仅锁定"
        },
        {
          value: "-1",
          label: "仅没锁定"
        }
      ],
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      search6: "",
      tableData: [],
      currentPage1: 1,
      //每页数据条数
      pageSize: 10,
      //总数据条数
      totalSize: 0,
      dialogTitle: "修改管理员信息",
      modifyEditorDialogVisible: false,
      //管理员详情
      centerDialogVisible: false,
      //弹窗是否显示管理员id
      isShowId: true,
      //弹窗个是都显示用户名
      isShowUserName: false,
      //弹窗管理员id
      inputAdministratorId: "",
      //弹窗用户名
      inputUserName: "",
      //弹窗昵称
      inputNickName: "",
      //弹窗角色id
      inputRolesId: "",
      //弹窗邮箱
      inputEmail: "",
      //弹窗密码
      inputPassword: "",
      //表格初始化数据
      listData: {},
      //管理员详情
      managerDetail: {},
      //根据账号权限是否显示详情按钮
      isShowDetailBtn:false,
      //根据账号权限是否显示编辑按钮
      isShowEditorBtn:false,
       //根据账号权限是否显示删除按钮
      isShowDeleteBtn:false,
      //根据账号权限是否显示添加按钮
      isShowAddBtn:false,
      //弹窗角色id下拉框
      rolesIdOptions:[],
      // 权限管理
       permissions:[],
      permissions_obj:{},
    };
  },
  created(){ 
    //权限判断
    this.permissions = this.$store.state.permissions;
    let oneOff=false;
    this.permissions.forEach((item, index) => {
      if(item==-1){
        oneOff=true;
      }else{
        this.permissions_obj['id_'+item]=item;
      }
    });
    if(oneOff){
      this.permissions_obj.id_all=true;
    }else{
      this.permissions_obj.id_all=false;
    };
  },
  mounted() {
    //判断权限
    let permissions=this.$store.state.permissions;
    permissions.forEach((item,index)=>{
        if(item==-1||item==27){
          this.isShowDetailBtn=true;
        };
         if(item==-1||item==28){
          this.isShowEditorBtn=true;
        };
         if(item==-1||item==32){
          this.isShowDeleteBtn=true;
        };
        if(item==-1||item==31){
          this.isShowAddBtn=true;
        };
    });
    this.getDataList();
    this.rolesList();
  },
  methods: {
    //获取初始化数据列表
    async getDataList() {
      let parames = {
        handshake: "",
        data: {
          manager_id: this.search1,
          username: this.search2,
          nick: this.search3,
          is_locked: this.search4,
          role_id: this.search5,
          email: this.search6,
          page: this.currentPage1,
          page_size: this.pageSize
        }
      };
      let res = await this.$axios.post(
        this.$api.managerLists,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.listData = res.data;
        this.totalSize = this.listData.total;
        this.tableData = this.listData.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //搜索
    searchMethod() {
      this.currentPage1=1;
      this.getDataList();
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      this.getDataList();
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.getDataList();
    },
    //添加
    addData() {
      this.modifyEditorDialogVisible = true;
      this.dialogTitle = "创建管理员信息";
      this.isShowId = false;
      this.isShowUserName = true;
      this.inputUserName="";
      this.inputNickName = "";
      this.inputRolesId = "";
      this.inputEmail = "";
      this.inputPassword = "";
    },
    //查看详情
    handleDetail(index, row) {
      this.centerDialogVisible = true;
      this.getManagerDetail(row.manager_id);
    },
    //编辑
    handleEdit(index, row) {
      this.modifyEditorDialogVisible = true;
      this.dialogTitle = "修改管理员信息";
      this.isShowId = true;
      this.isShowUserName = false;
      this.inputPassword = "";
      this.inputAdministratorId = row.manager_id;
      this.inputNickName = row.nick;
      this.inputRolesId = row.role_id;
      this.inputEmail = row.email;
    },
    //删除
     handleDelete(index, row) {
      this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         this.deleteMethod(row.manager_id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    //删除接口
    async deleteMethod(_id){
       let parames = {
        handshake: "",
        data: {
          manager_id: _id
        }
      };
      let res = await this.$axios.post(
        this.$api.managerDelete,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: "删除成功!",
          type: "success"
        });
        this.getDataList();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //提交修改或者添加
    submitModifyEditor() {
      if (this.dialogTitle == "修改管理员信息") {
        this.modifyInfo();
      } else {
        this.addManager();
      }
    },
    //取消提交
    cancelModifyEditor() {
      this.modifyEditorDialogVisible = false;
    },
    //获取管理员详情
    async getManagerDetail(manager_id) {
      let parames = {
        handshake: "",
        data: {
          manager_id: manager_id
        }
      };
      let res = await this.$axios.post(
        this.$api.managerDetail,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.managerDetail = res.data;
      } else {
        this.$message(res.message);
      }
    },
    //提交管理员信息修改
    async modifyInfo() {
      if (!this.inputAdministratorId) {
        this.$message({
          message: "管理员id不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputNickName) {
        this.$message({
          message: "昵称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputRolesId) {
        this.$message({
          message: "角色id不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputEmail) {
        this.$message({
          message: "邮箱不能为空",
          type: "warning"
        });
        return;
      }
      let parames = {
        handshake: "",
        data: {
          manager_id: this.inputAdministratorId,
          nick: this.inputNickName,
          role_id: this.inputRolesId,
          email: this.inputEmail,
          password: this.inputPassword
        }
      };
      let res = await this.$axios.post(
        this.$api.managerModify,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: "修改成功!",
          type: "success"
        });
        this.modifyEditorDialogVisible = false;
        this.getDataList();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //提交管理员添加
    async addManager() {
      if (!this.inputUserName) {
        this.$message({
          message: "用户名不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputNickName) {
        this.$message({
          message: "昵称不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputRolesId) {
        this.$message({
          message: "角色id不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputEmail) {
        this.$message({
          message: "邮箱不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.inputPassword) {
        this.$message({
          message: "密码不能为空",
          type: "warning"
        });
        return;
      }
      if (this.inputPassword&&this.inputPassword.length<6) {
        this.$message({
          message: "密码长度不能小于6位数",
          type: "warning"
        });
        return;
      }
      let parames = {
        handshake: "",
        data: {
          username: this.inputUserName,
          nick: this.inputNickName,
          role_id: this.inputRolesId,
          email: this.inputEmail,
          password: this.inputPassword
        }
      };
      let res = await this.$axios.post(
        this.$api.managerAdd,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: "添加成功!",
          type: "success"
        });
        this.modifyEditorDialogVisible = false;
        this.getDataList();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //角色列表
    async rolesList() {
      let parames = {
        handshake: "",
        data: {
          page: 1,
          page_size: 1000,
        }
      };
      let res = await this.$axios.post(
        this.$api.roleLists,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
         this.rolesIdOptions = res.data.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
  }
};
</script>
<style scoped>
.administratorManagement {
  padding-bottom: 0.4rem;
}
h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
.el-dialog .el-input {
  width: 80%;
}
.el-dialog .el-select {
  width: 80%;
}
.detail .title {
  margin-bottom: 0.1rem;
  color: #05a4bf;
}
.detail .detailBox {
  display: flex;
  flex-wrap: wrap;
}
.detail .detailItem {
  width: 50%;
  margin-bottom: 0.1rem;
}
.history .title {
  margin: 0.1rem 0;
  color: #05a4bf;
}
.history .detailItem {
  margin-bottom: 0.1rem;
}
</style>